<script setup>
    import CardTitle from '../../../components/CardTitle.vue'
    import EchartsLiquidfill from './EchartsLiquidfill.vue'

    const props = defineProps({
        onlineData: {
            type: Object,
            default: {}
        }
    })

    let { wisdomDrivenSum, wisdomDrivenOnlineNumb, wheatherDetectionSum, wheatherDetectionOnlineNumb, soilSum, soilOnlineNumb, pestSum, pestOnlineNumb, voyagesSum, voyagesOnlineNumb, visualizationSum, visualizationOnlineNumb } = props.onlineData

    let data = [
        {
            name: '智慧机井',
            totalCount: wisdomDrivenSum,
            onlineCount: wisdomDrivenOnlineNumb,
            borderColor: '#427FD4',
            fontColor: '#89E5F5',
            waveColor: 'rgba(137, 229, 245, 1)',
            waveColor2: 'rgba(137, 229, 245, 0.4)'
        },
        {
            name: '气象监测',
            totalCount: wheatherDetectionSum,
            onlineCount: wheatherDetectionOnlineNumb,
            borderColor: '#E1AC13',
            fontColor: '#E1AC13',
            waveColor: 'rgba(227, 212, 84, 1)',
            waveColor2: 'rgba(227, 212, 84, 0.4)'
        },
        {
            name: '土壤墒情',
            totalCount: soilSum,
            onlineCount: soilOnlineNumb,
            borderColor: '#36D2A6',
            fontColor: '#36D2A6',
            waveColor: 'rgba(57, 222, 172, 1)',
            waveColor2: 'rgba(57, 222, 172,0.4)'
        },
        {
            name: '虫情测报',
            totalCount: pestSum,
            onlineCount: pestOnlineNumb,
            borderColor: '#DB6B22',
            fontColor: '#DB6B22',
            waveColor: 'rgba(248, 144, 76, 1)',
            waveColor2: 'rgba(248, 144, 76, 0.4)'
        },
        {
            name: '水肥设备',
            totalCount: voyagesSum,
            onlineCount: voyagesOnlineNumb,
            borderColor: '#2FFF8A',
            fontColor: '#2FFF8A',
            waveColor: 'rgba(47, 255, 138, 1)',
            waveColor2: 'rgba(47, 255, 138, 0.4)'
        },
        {
            name: '农田可视化',
            totalCount: visualizationSum,
            onlineCount: visualizationOnlineNumb,
            borderColor: '#CC39FF',
            fontColor: '#CC39FF',
            waveColor: 'rgba(204, 57, 255, 1)',
            waveColor2: 'rgba(204, 57, 255, 0.4)'
        }
    ]

</script>

<template>
    <div class="online-survey-wrap">

        <card-title title="各设备在线概况"></card-title>

        <div class="liquidFill-list">
            <div 
                class="liquidFill-item"
                v-for="(item , index) in data"
                :key="index"
            >
                <echarts-liquidfill
                    :onlineCount=" item.onlineCount || 0"
                    :totalCount="item.totalCount || 0"
                    :borderColor="item.borderColor"
                    :fontColor="item.fontColor"
                    :waveColor="item.waveColor"
                    :waveColor2="item.waveColor2"
                ></echarts-liquidfill>
                <div class="title">{{ item.name }}</div>
            </div>

        </div>
        
    </div>
</template>

<style lang="less" scoped>
    .online-survey-wrap{
        width: 100%;
        height: 368px;
        margin-top: 7px;
        background: url('../../../assets/images/online-survey.png') center no-repeat;
        background-size: 100% 100%;

        .liquidFill-list{
            margin-top: -26px;

            .liquidFill-item{
                display: inline-block;
                width: 95px;
                text-align: center;
                margin: 20px 0 0 55px;

                .title{
                    font-size: 14px;
                    color: #F2FFFB;
                    padding-top: 7px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:before{
                        content: "";
                        display: block;
                        width: 4px;
                        height: 4px;
                        background: #FFFFFF;
                        border-radius: 50%;
                        margin-right: 5px;
                    }

                    &:after{
                        content: "";
                        display: block;
                        width: 4px;
                        height: 4px;
                        background: #FFFFFF;
                        border-radius: 50%;
                        margin-left: 5px;
                    }
                }
            }
        }
    }
</style>